<template>
    <div>
        <title-bar title="博彩详情" :needback="true"></title-bar>
        <!--轮播图-->
        <carousel></carousel>

        <!--显示彩票信息-->
        <!--3.开奖日期 没有请求数据history是undefined-->
        <div style="margin-top: 8px;">
            <div style="float: left;">第{{history&&history.code}}期</div>
            <div style="float: right;">{{history&&history.date}}</div>
        </div>

        <!--清除浮动的div-->
        <div class="clearfix"></div>


        <!--4.中奖号码-->
<!--        //或者history.red != null-->
        <div class="row text-center" style="margin-top: 10px;" v-if="history&&history.red != null">
            <div class="ball-item ball-red" v-for="(red,i) in history&&history.red.split(',')" :key="i">{{red}}</div>

            <div class="ball-item ball-blue">{{history&&history.blue}}</div>
        </div>

        <!--5.奖池金额-->
        <div style="margin-top: 14px;">
            <table class="table table-bordered">
                <thead>
                <tr style="background-color: gainsboro;">
                    <td class="text-center">本期销量</td>
                    <td class="text-center">奖池奖金</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="text-center" style="color: red;">{{history&&history.sales}}</td>
                    <td class="text-center" style="color: red;">{{history&&history.poolmoney}}</td>
                </tr>
                </tbody>
            </table>
        </div>

        <!--6.中奖信息-->
        <div>
            <table class="table table-bordered">
                <thead>
                <tr style="background-color: gainsboro;">
                    <td class="text-center">奖项</td>
                    <td class="text-center">中奖注数</td>
                    <td class="text-center">奖金</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(prizegrade,i) in history&&history.prizegrades" :key="i">
                    <td class="text-center">{{prizegrade.type}}</td>
                    <td class="text-center">{{prizegrade.typenum}}</td>
                    <td class="text-center">{{prizegrade.typemoney}}</td>
                </tr>
                </tbody>

            </table>
        </div>

    </div>
</template>

<script lang="ts">
    import TitleBar from '@/pages/common/TitleBar.vue';
    import Carousel from '@/pages/common/Carousel.vue';
    import MenuBar from '@/pages/common/MenuBar.vue'
    import axios from 'axios'
    import {Vue, Component, Prop, Provide} from "vue-property-decorator"
    import {DetailInfo} from "@/types/DetailInfo";
   @Component({
       components:{
               TitleBar,
               Carousel,
               MenuBar
       },
       // computed: {
       //     // 需要标注
       //     code:function () {
       //         return this.$route.query.code;
       //     },
       //
       // },
   })

    export default class DetailPage extends Vue{

       // code!: string;
       history=null;

       code?: string;

       data() {
           console.log("this.$route.query:"+this.$route.query)
           return {
               code: this.$route.query.code,
               // history:this.history,
           }
       }

        mounted() {
            //发送请求获取 获取当前期的数据
            axios.get('/api/detail?code=' + this.code).then(resp => {
                console.log("data:",resp.data)
                //修改值
                this.history = resp.data.data;
                console.log("待渲染的数据:",this.history)
            });
        }

        update(): void {
            console.log("data-----------update"+this.data)
        }

        beforeUpdate(){
            console.log("data-----------beforeUpdate"+this.code)
        }

   }
</script>

<style scoped>

</style>